<template>
  <div
      v-loading="loading || popover.visible"
      element-loading-svg="-"
      element-loading-background="rgba(0,0,0,.10)"
      element-loading-custom-class="m-table-loading"
  >
    <!--  Outer: Header  -->
    <div class="justified m-table-outer m-table-header">
      <div>
        <slot name="header"/>
      </div>
      <div>
        <slot name="header-tool"/>
      </div>
    </div>

    <!--  Body  -->
    <el-table
        ref="table"
        v-bind="{...$props, ...$attrs}"
        :tooltip-options="{placement:'bottom-end', popperClass:'m-table-tooltip', enterable: false}"
        :row-class-name="tableRowClassName"
        :cell-class-name="tableCellClassName"
        @cell-click="handleCellClick"
        @cell-contextmenu="handleCellContextMenu"
    >
      <!-- Body
      Meta & Index    -->
      <el-table-column type="index" align="center" fixed="left">
        <template #header>
          <fa
              icon="cubes"
              style="cursor:pointer;"
              @click.prevent="hasMetaViewSlot&&showPopover($event,'meta')"
          />
        </template>
        <template #default="{$index, row}">
          <el-text
              size="small"
              :type="selection.includes(row)? 'primary':'info'"
              :tag="selection.includes(row)? 'b':'span'"
          >
            {{ $index + 1 }}
          </el-text>
        </template>
      </el-table-column>

      <!-- Body
      Cell    -->
      <template v-for="(field ,prop ) in view.fields" :key="prop">
        <el-table-column
            :prop="prop"
            :label="field.label"
        >
          <template #header>
            <m-table-header
                :view="view"
                :field="field"
                @search="hasSearchSlot&&showPopover($event,'search', field)"
                @meta="hasFieldSlot&&showPopover($event,'field', field)"
            ></m-table-header>
          </template>
          <template #default="{row}">
            <slot name="cell" :field="field" :row="row" :prop="prop">
              {{ row[prop] }}
            </slot>
          </template>
        </el-table-column>
      </template>

      <!--  Body
      Columns    -->
      <template
          v-if="columns?.length"
          v-for="col in columns"
      >
        <el-table-column
            :show-overflow-tooltip="false"
            align="center"
            fixed="right"
            :label="col.label"
            :width="col.width || 'auto'"
        >
          <template #default="{row}">
            <component
                :is="col.component"
                :item="row"
            ></component>
          </template>
        </el-table-column>
      </template>

      <!--  Body
      Buttons    -->
      <el-table-column
          v-if="buttons?.length"
          :show-overflow-tooltip="false"
          :width="width"
          align="center"
          fixed="right"
          label="操作"
      >
        <template #header>
          <fa icon="cogs"/>
        </template>
        <template #default="{row}">
          <m-table-buttons
              :buttons="buttons"
              :item="row"
              @width="setWidth"
          ></m-table-buttons>
        </template>
      </el-table-column>

    </el-table>


    <!--  Footer  -->
    <div class="justified m-table-outer m-table-footer">
      <div>
        <slot name="footer"/>
      </div>
      <div>
        <slot name="footer-tool"/>
      </div>
    </div>
  </div>


  <!--  Popover  -->
  <el-popover
      v-model:visible="popover.visible"
      :virtual-ref="popover.ref"
      trigger="click"
      :placement="popover.placement"
      virtual-triggering
      teleported
      width="auto"
  >
    <slot
        name="pop-meta" v-if="popover.type==='meta'"
        :view="view"/>
    <slot
        name="pop-search" v-if="popover.type==='search'"
        :field="popover.data"/>
    <slot
        name="pop-field" v-if="popover.type==='field'"
        :field="popover.data"/>
    <slot
        name="pop-cell" v-if="popover.type==='cell'"
        :data="popover.data['row']" :prop="popover.data['prop']"/>
    <slot
        name="pop-index" v-if="popover.type==='index'"
        :row="popover.data"/>

  </el-popover>

</template>

<script setup lang="ts">

import {type MorghulisTableProps, morghulisTablePropsDefaults} from "../../types/table/m.table.types";
import MTableHeader from "./MTableHeader.vue";
import {ref} from "vue";
import {useMorghulisTable} from "./useMTable";
import MTableButtons from "./MTableButtons.vue";


/**
 * 参数，含默认值
 */
const table = ref()
let props = withDefaults(
    defineProps<MorghulisTableProps>(),
    morghulisTablePropsDefaults
)

let width = ref(0)

function setWidth(w: number) {
  width.value = w + 26
}

const {
  popover,
  selection,
  tableRowClassName,
  tableCellClassName,
  handleCellClick,
  handleCellContextMenu,
  showPopover,
  setSelection,
  hasSearchSlot,
  hasFieldSlot,
  hasMetaViewSlot,
  closePopover
} = useMorghulisTable(table, props)

function getSelection() {
  return selection.value
}

/**
 * 暴露
 */
defineExpose({getSelection, setSelection, closePopover})
</script>